<template>
  <div>
    <!-- 上部导航栏 -->
    <van-tabs v-model="activeTab" @change="onTabChangeTop">
      <van-tab title="关注"></van-tab>
      <van-tab title="发现"></van-tab>
      <van-tab title="广场"></van-tab>
    </van-tabs>
    <!-- 根据当前激活的 tab 显示不同内容 -->
    <div v-if="activeTab === '关注'">
      <van-nav-bar title="关注" right-text="搜索" @click-right="goToSearch" />
      <div v-for="(item, index) in list" :key="index" class="post-item">
        <post-item :item="item" />
      </div>
    </div>
    <div v-else-if="activeTab === '发现'">
      <!-- 这里可以添加发现页的具体内容 -->
      <van-nav-bar title="发现" right-text="搜索" @click-right="goToSearch" />
      <p>这是发现页的内容</p>
    </div>
    <div v-else-if="activeTab === '广场'">
      <!-- 这里可以添加广场页的具体内容 -->
      <van-nav-bar title="广场" right-text="搜索" @click-right="goToSearch" />
      <p>这是广场页的内容</p>
    </div>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" @change="onTabChange">
      <van-tabbar-item name="home">首页</van-tabbar-item>
      <van-tabbar-item name="shop">商城</van-tabbar-item>
      <van-tabbar-item name="plus" icon="plus">+</van-tabbar-item>
      <van-tabbar-item name="message">消息</van-tabbar-item>
      <van-tabbar-item name="UserCenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 底部导航栏激活项
const active = ref('home')
// 模拟数据
const list = ref([/* 模拟数据 */])
// 上部导航栏激活项
const activeTab = ref('关注')

// 跳转搜索页
const goToSearch = () => router.push('/search')

// 底部导航跳转
const onTabChange = (name) => {
  if (name === 'home') router.push('/')
  if (name === 'shop') console.log('商城跳转')
  if (name === 'message') console.log('消息跳转')
  if (name === 'UserCenter') console.log('我的跳转')
}

// 上部导航切换
const onTabChangeTop = (value) => {
  activeTab.value = value
}
</script>

<style scoped>
.post-item {
  padding: 15px;
  margin-bottom: 15px;
  background: white;
  border-radius: 10px;
}
</style>    